
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import codeAlert from './codeAlert.vue'

const refCodeAlert = ref();

const myAlert= ref(false)

const setAlert = (b)=>{
  myAlert.value=b;
}


const title = ref('一个奖品')

const setTitle = (t)=>{
  title.value=t;
}

const img=ref('/jiang.png');

const setImg = (t)=>{
  img.value=t;
}
const prize = ref({});
const setPrize = (p)=>{
  prize.value=p;
}

defineExpose({ setAlert,setTitle,setImg,setPrize })


const gitPrize = async ()=>{
  const { data } = await axios.get("/api/gk_receive_prize",{
    params:{
      id:window.activity_id,
      open_id:window.openid,
      access_token:window.accesstoken,
      prize_id:prize.value.id,
      class:window.mode,
    }
  });
  if(data.code!=0){
    alert(data.msg)
    return;
  }
  myAlert.value=false;
  refCodeAlert.value.setAlert(true);
  refCodeAlert.value.setData({
    url:data.data,
    name:prize.value.name
  })
}


</script>

<template>
    <div v-if="myAlert" class="masking" >
      <div class="record" >
        <div class="alertTitle" >{{ prize.name }}</div>
        <div style="height: 24px;" ></div>
        <div class="alertImg" >
          <img :src="prize.url?prize.url:img" />
        </div>
        <div style="height: 24px;" ></div>
        <div class="alertBtn" @click="gitPrize" ></div>
        <div style="height: 8px;" ></div>
        <div class="alertTip" >奖品可在中奖记录处查看兑换</div>
      </div>
    </div>
    <codeAlert ref="refCodeAlert" ></codeAlert>
</template>

<style lang="less" scoped>

.masking{
  position: fixed;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  .record{
    width: 279px;
    height: 333px;
    background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%);
    border-radius: 12px 12px 12px 12px;
    .alertTitle{
        padding-top: 32px;
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }
    .alertImg{
        width: 129px;
        height: 129px;
        margin: 0 auto;
        img{
          width: 129px;
          height: 129px;
        }
    }
    .alertBtn{
        background: url(../assets/videoFa.png);
        background-size: 236px 48px;
        background-repeat: no-repeat;
        width: 236px;
        height: 48px;
        margin: 0 auto;
    }
    .alertTip{
        font-weight: 500;
        color: #333333;
        font-size: 13px;
        opacity: 0.3;
        text-align: center;
    }
  }
}

</style>